<template>
	<view class="order">
		<view class="coupon-tabs">
			<u-tabs :list="list"  :is-scroll="false"  :current="current" @change="change" active-color="#D1AA56"></u-tabs>
		</view>
		<view class="content">
			<view class="swiper-item">
				<view class="item" v-for="(item,index) in order_list" :key="index">
					<view class="item-top">
						<text>{{item.create_time}}</text>
						<text>{{item.pay_status_name}}</text>
					</view>
					<view class="item-center" @click="goOrderDetail(item.order_item_id)">
						<image :src="item.goods_pic_one" mode=""></image>
						<view class="item-center-right">
							<text>{{item.goods_name}}</text>
							<text>x{{item.buy_num}}</text>
						</view>
					</view>
					<view class="item-bottom">
						<text>应付：¥{{item.sub_total}}</text>
						<!-- 待支付 -->
						<view class="item-bottom-right" v-if="item.pay_status == 1">
							<button class="small-btn" @click="onDelOrder(item.order_item_id)">删除订单</button>
							<button class="small-btn">去支付</button>
						</view>
						<!-- 待发货 -->
						<view class="item-bottom-right" v-if="item.pay_status == 2">
							<button class="small-btn">修改地址</button>
						</view>
						<!-- 待收货 -->
						<view class="item-bottom-right" v-if="item.pay_status == 3">
							<button class="small-btn" @click="goLogistics(item.order_item_id)">查看物流</button>
						</view>
						<!-- 待评价 -->
						<view class="item-bottom-right" v-if="item.pay_status == 4">
							<button class="small-btn" @click="goLogistics(item.order_item_id)">查看物流</button>
							<button class="small-btn" @click="goPubilish(item.goods_id,item.order_item_id)">评价</button>
						</view>
						<!-- 已取消 -->
						<view class="item-bottom-right" v-if="item.pay_status == 5">
							<button class="small-btn" @click="onDelOrder(item.order_item_id)">删除订单</button>
							<button class="small-btn" @click="goGoodsDetail(item.goods_id)">再次购买</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				type:99,
				list: [
					{
						name:'全部'
					},
					{
						name:'待支付'
					},
					{
						name:'待发货'
					},
					{
						name:'待收货'
					},
					{
						name:'待评价'
					},
				],
				page:1,
				order_list:[]
			};
		},
		onLoad(option) {
			this.current = option.num
			this.type = option.num
			this.getPageData()
		},
		created() {
			// this.getTabsList()
		},
		onReachBottom() {
			this.page ++
			this.getPageData()
		},
		methods:{
			// 前往物流信息
			goLogistics(id){
				uni.navigateTo({
					url:'../../common/logistics/logistics?id=' + id
				})
			},
			// 前往商品详情
			goGoodsDetail(id){
				uni.navigateTo({
					url:'../../common/shop/goodsDetail/goodsDetail?id=' + id
				})
			},
			// 前往评价中心
			goPubilish(id,order_id){
				uni.navigateTo({
					url:'../../common/publish/publish?id=' + id + '&order_id=' + order_id
				})
			},
			// 前往订单详情
			goOrderDetail(id){
				uni.navigateTo({
					url:'../../common/orderDetail/orderDetail?id=' + id
				})
			},
			// 删除订单
			onDelOrder(id){
				uni.request({
				    url:this.$Url +'/index.php/App/Order/delOrder',
				    method:'POST',
				    data:{
				       order_item_id:id
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.page = 1
							this.order_list = []
							this.getPageData()
							uni.showToast({
								title:'删除成功',
								icon:'none',
								duration:1200
							})
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求页面数据
			getPageData(){
				uni.request({
				    url:this.$Url +'/index.php/App/Order/orderList',
				    method:'POST',
				    data:{
				       p:this.page,
					   pay_status:this.type
				    },
				    header:{
				        "token":uni.getStorageSync('token')
				    },
				    success: (res) => {
						if (res.data.status == 200) {
							this.order_list = this.order_list.concat(res.data.data.order_list.order_item_list)
						} else{
							uni.showToast({
								title:res.data.msg,
								icon:'none',
								duration:1200
							})
						}
				    }
				})
			},
			// 请求tabs列表
			// getTabsList(){
			// 	uni.request({
			// 	    url:this.$Url +'/index.php/App/Order/orderTabList',
			// 	    method:'POST',
			// 	    data:{
				       
			// 	    },
			// 	    header:{
			// 	        "token":uni.getStorageSync('token')
			// 	    },
			// 	    success: (res) => {
			// 			if (res.data.status == 200) {
			// 				this.list = res.data.data
			// 			} else{
			// 				uni.showToast({
			// 					title:res.data.msg,
			// 					icon:'none',
			// 					duration:1200
			// 				})
			// 			}
			// 	    }
			// 	})
			// },
			// tabs切换
			change(index) {
				this.page = 1
				this.order_list = []
				this.current = index;
				if (index == 0) {
					this.type = 99
				} else{
					this.type = index
				}
				this.getPageData()
			},
		}
	}
</script>

<style lang="scss">
.order{
	width: 100vw;
	min-height: 100vh;
	background-color: #f7f7f7;
	.coupon-tabs{
		background-color: #fff;
		padding-top: 10upx;
		padding-bottom: 10upx;
		position: fixed;
		width: 100%;
		z-index: 100;
	}
	.content{
		padding-top: 100upx;
		padding-bottom: 100upx;
			.item{
				background-color: #fff;
				margin-top: 20upx;
				.item-top{
					height: 90upx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 30upx;
					font-size: 20upx;
					text:first-child{
						color: #333;
					}
					text:last-child{
						color: #dbb769;
					}
				}
				.item-center{
					padding: 0 30upx;
					display: flex;
					padding-bottom: 20upx;
					border-bottom: 1px solid #e8e8e8;
					image{
						width: 124upx;
						height: 124upx;
						margin-right: 20upx;
					}
					.item-center-right{
						width: 540upx;
						display: flex;
						justify-content: space-between;
						margin-top: 20upx;
						text:first-child{
							color: #333;
							font-size: 26upx;
						}
						text:last-child{
							color: #999;
							font-size: 24upx;
						}
					}
				}
					.item-bottom{
						height: 100upx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						background-color: #fff;
						padding: 0 30upx;
						text{
							font-size: 28upx;
							color: #333;
						}
						.item-bottom-right{
							display: flex;
							align-items: center;
							justify-content: center;
							.small-btn{
								width: 152upx;
								height: 63upx;
							}
							.small-btn:first-child{
								background-color: #fff;
								border: 1px solid #dab768;
								color: #dab768;
							}
							.small-btn:last-child{
								margin-left: 18upx;
							}
						}

					}
			}
		
	}
}
</style>
